<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flf-图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
    <script src="./js/http.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em id="scolor">10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em id="scolor01">123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em id="scolor02">35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em id="scolor03">123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show">
                    <!-- 折线图 -->
                </div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show">
                    <!-- 饼状图 -->
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show">
            <!-- 树状图 -->
        </div>
    </div>

    <script>
        /* 调用相关函数 */
        $(function () {
            /* 1.0 获取总数数据 */
            spannel_list();

            /* 2.0 获取折线图相应数据 */
            curve_show_list();

            /* 4.0 获取饼状图相应数据 */
            pie_show_list();

            /* 6.0 获取树状图相应数据 */
            column_show_list();

        })

        /* 1.0 实现四个数据的获取 */
        function spannel_list() {
            /* 1.1 发送请求 */
            myAjax('get', '/admin/data/info', '', function (gl) {
                /* 获得的数据类型
                {
                    "totalArticle": 223,
                    "dayArticle": 18,
                    "totalComment": 7999,
                    "dayComment": 36
                }*/

                /* 1.2 进行赋值 */
                $('#scolor').html(gl.totalArticle);
                $('#scolor01').html(gl.dayArticle);
                $('#scolor02').html(gl.totalComment);
                $('#scolor03').html(gl.dayComment);
            });
        }

        /* 2.0 获取折线中的数据 */
        function curve_show_list() {
            /*2.1 发送数据获取请求  */
            myAjax('get', '/admin/data/article', '', function (gl) {
                /* 获取的数据类型
                 {
                    "code": 200,
                    "msg": "获取成功",
                    "date": [
                        {
                            "date": "2019-05-20",
                            "count": 23
                        },
                        {
                            "date": "2019-05-21",
                            "count": 19
                        }]
                }*/

                /* 2.2 通过 .map 语法得到gl .date . date组成的数组 */
                let date = gl.date.map(item => item.date);
                let count = gl.date.map(item => item.count);

                /* 2.3 获取数据后对折线图进行传参 */
                curve_show(date, count);

            })
        }

        /* 3.0 折线图的添加 */
        function curve_show(date, count) {

            /* 3.1 初始化容器 */
            let charts = echarts.init(document.querySelector('#curve_show'));

            /* 3.2 定义图标相关参数 */
            let option = {

                //3.2.1 图表标题
                title: {
                    text: '文章日新增趋势',
                    left: 'center'  //居中
                },

                //3.2.2 X轴数据
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date,   // 获取数据组成的数组    ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },

                //3.2.3 Y轴数据
                yAxis: {
                    type: 'value'
                },

                //3.2.4 实现鼠标移动出现提示板
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },

                //3.2.5 图表的类型和数据
                series: [{
                    data: count,     // 获取数据组成的数组    [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    //设置折线上的每一个数据显示
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    //设置折线圆滑平缓
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }]
            };
            // 3.3 这是参数
            charts.setOption(option);

        }

        /* 4.0 获取饼状图的数据 */
        function pie_show_list() {
            /* 4.1 发送请求获取数据 */
            myAjax('get', '/admin/data/category', '', function (gl) {
                /* 获取的数据类型
                {
                "code": 200,
                "msg": "获取成功",
                "date": [
                    {
                        "name": "爱旅行",
                        "articles": 41
                    },
                    {
                        "name": "爱生活",
                        "articles": 72
                    }] */

                /* 4.2 将数据进行打包成数组或复合数组 */
                let name = gl.date.map(item => item.name);
                let dates = gl.date.map(item => ({ name: item.name, value: item.articles }));
                // console.log( dates);

                /* 4.3 给饼状图函数传入实参 */
                pie_show(name, dates);

            })

        }
        
        /* 5.0 饼状图的添加 */
        function pie_show(name, dates) {

            /* 5.1 初始化容器 */
            let charts = echarts.init(document.querySelector('#pie_show'));

            /* 5.2 图标内容 */
            let option = {
                title: {
                    text: '同名数量统计',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: name,
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: true,
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true  //引入线显示
                        },
                        data: dates,
                    }
                ]
            };

            // 5.3 这是参数
            charts.setOption(option);
        }

        /* 6.0 获取树状图的数据 */
        function column_show_list() {
            /* 6.1 发送请求获取数据 */
            myAjax('get', '/admin/data/visit', '', function (gl) {
                /* 获取的数据类型
                {
                    "code": 200,
                    "msg": "日访问量统计数据获取成功",
                    "data": {
                        "2019-05-28": 13016,
                        "2019-05-27": 11503,
                        "2019-05-26": 9128,
                        "2019-05-25": 13155,
                        "2019-05-24": 12734,
                        "2019-05-23": 10714,
                        "2019-05-22": 16282
                    }
                } */

                /* 6.2 加工获取的数据 */
                let key = [];
                let value = [];

                //进行数据的遍历获取相对应的数据
                let data = gl.data;
                for (const i in data) {

                    //将data对象中的key对应的值保存到xdata数组中
                    key.push(i);

                    // 将data对象中的当前key对应的值保存到sdata数组中
                    value.push(data[i]);
                }
                // console.log(key, value);

                /* 6.3 给树状图传参 */
                column_show(key, value);
            })
        }

        /* 7.0 树状图添加 */
        function column_show(key, value) {

            /* 7.1 初始化容器 */
            let charts = echarts.init(document.querySelector('#column_show'));

            /* 7.2 定义图标相关参数 */
            let option = {
                tooltip: {},
                legend: {},
                xAxis: {
                    type: 'category',
                    data: key, //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: "日访问量",
                    type: "bar",
                    data: value,
                    barWidth: "40%",
                    itemStyle: {
                        color: "rgba(60, 241, 148, 1)"
                    }
                }]
            };
            // 7.3 外图表中添加参数option
            charts.setOption(option);

        }


    </script>
</body>

</html>